<template>
  <div class="moreInformation">
    <div class="home">
      <div class="title">
        <span v-if="">更多信息——{{User.moreInformationTitle}}</span></div>
      <div class="content">
        <div class="content-center">
          <ul @mousewheel="scrollChange" class="files-detail">
              <!--       公告     -->
              <li class="item form-part"
                  :id="formTitle[0].id">
                <div class="detail" v-for="index in noticeForm" @click="toNoticeParticulars(index.noticeId)">
              <span class="index-top">
                <span class="type">
                  [公告]
                </span>
                  <span>{{ index.noticeTitle }}</span>
                </span>
                  <div class="index-content">{{ index.noticeDigest }}</div>
                  <div class="index-bottom">
                    <div style="display: flex;align-items: center;margin-right: 20px;">
                      <img class="bottom-img"
                           src="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/时间.1lb8bow9if28.webp"
                           alt=""> {{ shortTime(index.annceTime) }}
                    </div>
                    <div style="display: flex;align-items: center;">
                      <img class="bottom-img"
                           src="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/作者.5c5ep0cp1e00.webp"
                           alt=""> {{ index.admin.adminName }}
                    </div>

                  </div>
                </div>
              </li>

              <!--       招标     -->
              <li class="item form-part"
                  :id="formTitle[1].id">
                <div class="detail" v-for="index in binddingForm" @click="toBinddingParticulars(index.tenderId)">
                <span class="index-top" >
                  <span class="type">
                  [招标]
                  </span>
                <span>{{ index.tenderTitle }}</span>
                </span>

                  <div class="index-content">{{ index.tenderDigest }}</div>
                  <div class="index-bottom">
                    <div style="display: flex;align-items: center;margin-right: 20px;">
                      <img class="bottom-img"
                           src="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/时间.1lb8bow9if28.webp"
                           alt=""> {{ shortTime(index.tenderTime) }}
                    </div>
                    <div style="display: flex;align-items: center;">
                      <img class="bottom-img"
                           src="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/作者.5c5ep0cp1e00.webp"
                           alt=""> {{ index.admin.adminName }}
                    </div>
                  </div>
                </div>
              </li>
              <!--       日常活动     -->
              <li class="item form-part"
                  :id="formTitle[2].id">
                <div class="detail" v-for="index in activityForm" @click="toActivityParticulars(index.activityId)">
              <span class="index-top" >
                <span class="type">
                  [活动]
                </span>
                  <span>{{ index.activityTitle }}</span>
                </span>
                  <div class="index-content">{{ index.activityDigest }}</div>
                  <div class="index-bottom">
                    <div style="display: flex;align-items: center;margin-right: 20px;">
                      <img class="bottom-img"
                           src="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/时间.1lb8bow9if28.webp"
                           alt=""> {{ shortTime(index.activityReleasetime) }}
                    </div>
                    <div style="display: flex;align-items: center;">
                      <img class="bottom-img"
                           src="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/作者.5c5ep0cp1e00.webp"
                           alt=""> {{ index.admin.adminName }}
                    </div>
                  </div>
                </div>
              </li>
              <!--       志愿者活动     -->
              <li class="item form-part"
                  :id="formTitle[3].id">
                <div class="detail" v-for="index in volunteerForm" @click="toVolunteerParticulars(index.activityId)">
              <span class="index-top" >
                <span class="type">
                  [志愿者]
                </span>
                  <span>{{ index.activityTitle }}</span>
                </span>
                  <div class="index-content">{{ index.activityDigest }}</div>
                  <div class="index-bottom">
                    <div style="display: flex;align-items: center;margin-right: 20px;">
                      <img class="bottom-img"
                           src="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/时间.1lb8bow9if28.webp"
                           alt=""> {{ shortTime(index.activityReleasetime) }}
                    </div>
                    <div style="display: flex;align-items: center;">
                      <img class="bottom-img"
                           src="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/作者.5c5ep0cp1e00.webp"
                           alt=""> {{ index.admin.adminName }}
                    </div>
                  </div>
                </div>
              </li>
          </ul >
          <Anchor ref="anchor" :list="formTitle"/>
        </div>

      </div>
    </div>
  </div>
</template>

<script>

import Anchor from "@/views/reception/moreInformation/anchor.vue";
import {
  getAllEverydayActivity,
  getAllNotice,
  getAllTender, getAllVolunteerActivity,
} from "@/api/allApi";
import {shortTime} from "../../../utils/timeFormat";
import {useUser} from "@/store/userStore";

export default {
  data() {
    return {
      User:useUser(),
      formTitle: [
        {
          id: 'anchor_1',
          title: '公告信息',
          // 默认选择
          checked: true
        },
        {
          id: 'anchor_2',
          title: '招标信息'
        },
        {
          id: 'anchor_3',
          title: '活动信息'
        },
        {
          id: 'anchor_4',
          title: '志愿者信息'
        },
      ],
      pageSize: 5,
      total: 0,
      pageNum: 1,
      noticeForm: [],
      binddingForm: [],
      volunteerForm: [],
      activityForm: [],
    }
  },
  components: {
    Anchor
  },
  methods: {
    shortTime,
    // 处理锚点滚动事件
    scrollChange() {
      this.$refs.anchor.handleScrollChange()
    },

    toNoticeParticulars(noticeId) {
      this.$router.push({
        path: "/userLayout/noticeParticulars/"+noticeId,
      });
    },
    toBinddingParticulars(tenderId) {
      this.$router.push({
        path: "/userLayout/binddingParticulars/"+tenderId,
      });
    },
    toVolunteerParticulars(volunteerId) {
      this.$router.push({
        path: "/userLayout/volunteerParticulars/"+volunteerId,
      });
    },
    toActivityParticulars(activityId) {
      this.$router.push({
        path: "/userLayout/activityParticulars/"+activityId,
      });
    },
    getAllNotice() {
      getAllNotice().then(res => {
        this.noticeForm = res.data.data
      })
    },
    getAllEverydayActivity() {
      getAllEverydayActivity().then(res => {
        this.activityForm = res.data.data
      })
    },
    getAllVolunteerActivity() {
      getAllVolunteerActivity().then(res => {
        this.volunteerForm = res.data.data
      })
    },
    getAllTender() {
      getAllTender().then(res => {
        this.binddingForm = res.data.data
      })
    }
  },
  mounted() {
    this.getAllNotice()
    this.getAllEverydayActivity()
    this.getAllVolunteerActivity()
    this.getAllTender()
  }
}
</script>

<style lang="less" scoped>

.home {
  width: 80%;
  margin: auto;
  .title {
    display: flex;
    margin: 30px 0 0 0;
    padding: 15px;
    justify-content: flex-start;
    background-color: #fff;
    border-radius: 5px;
    font-size: 20px;
  }
  .content {
    display: flex;
    justify-content: flex-end;
    padding: 30px 0;
    position: relative;
    min-width: 1040px;
    margin: auto;
    flex-wrap: wrap;
    .content-center {
      display: flex;
      justify-content: flex-end;
      max-height: 520px;

      ul {

        height: 100%;
        overflow-y: auto;
        width: 72%;
        padding: 20px;
        border-radius: 5px;
        background-color: #fff;

        .detail {
          padding: 10px;
          border-bottom: 1px solid #e8e8e8;
          cursor: pointer;

          .index-content {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; //此处为行数，可以改为任意数字
            font-size: 14px;
            margin: 8px 0;
            text-indent: 2em
          }

          .index-top {

            .type {
              color: #409EFF;
              font-size: 16px;
              font-weight: 700;
            }
          }

          .index-top:hover {
            text-decoration:underline;
          }

          .index-bottom {
            font-size: 14px;
            display: flex;
            align-items: center;

            .bottom-img {
              width: 14px;
              margin-right: 3px;

            }

          }
        }
      }
    }




  }

}



.item {
  //border: 1px solid black;
  margin-bottom: 20px;
  border-radius: 5px;
  margin-right: 10px;
}


/*滚动条整体粗细样式*/
::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 8px;
  height: 8px;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  /* 颜色 */
  /* background:#b6b6b6!important; */
  /* 线性渐变背景 */
  //background-image: linear-gradient(45deg, #ffbd61 25%,#ffbd61 25%, #ff8800 25%, #ff8800 50%,#ffbd61 50%, #ffbd61 75%, #ff8800 75%, #ff8800 100%)!important;
}

/*滚动条轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  background: #EDEDED !important;
}
</style>